<script setup lang="ts">
import {
  NavigationMenu, NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle
} from "~/components/ui/navigation-menu";


type TypeLinks = {
  title: string,
  link: string,
}

const links = ref<TypeLinks[]>([
  {
    title: 'На главную',
    link: '/'
  },
  {
    title: 'Личный кабинет',
    link: '/cabinet'
  },
  {
    title: 'Все туры',
    link: '/tours'
  },
])
</script>

<template>
<footer class="container grid grid-cols-12 items-center py-10 justify-center max-lg:grid-cols-1 max-lg:grid-rows-3 max-lg:gap-5">

  <div class="flex justify-start lg:col-start-1 lg:col-end-5 max-lg:row-start-2 max-lg:justify-center">
    <span>Тел: +7 (800) 555-35-35</span>
  </div>

  <div class="flex justify-center items-center lg:col-start-5 lg:col-end-9 max-lg:row-start-1">
    <NavigationMenu>
      <NavigationMenuList class="flex justify-center items-center gap-5">
        <NavigationMenuItem v-for="link in links" :key="link.title">
          <NuxtLink :to="link.link">
            <NavigationMenuLink :class="navigationMenuTriggerStyle()">
              {{link.title}}
            </NavigationMenuLink>
          </NuxtLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </div>

  <div class="flex justify-end lg:col-start-9 lg:col-end-13 max-lg:row-start-3 max-lg:justify-center">
    <span>© 2024 Все права защищены</span>
  </div>
</footer>
</template>

<style scoped>

</style>